// DOM 元素
const videoElement = document.getElementById('videoElement');
const startButton = document.getElementById('startButton');
const stopButton = document.getElementById('stopButton');
const loadingIndicator = document.getElementById('loadingIndicator');

// 摄像头状态
let cameraActive = false;

// 显示加载指示器
function showLoading() {
    loadingIndicator.classList.remove('hidden');
}

// 隐藏加载指示器
function hideLoading() {
    loadingIndicator.classList.add('hidden');
}

// 启动摄像头
async function startCamera() {
    if (cameraActive) return;
    
    showLoading();
    startButton.disabled = true;
    
    try {
        // 向服务器发送启动摄像头请求
        const response = await fetch('/start_camera');
        const data = await response.json();
        
        if (data.status === 'success') {
            // 设置视频源为视频流
            videoElement.src = '/video_feed';
            cameraActive = true;
            stopButton.disabled = false;
            
            // 添加一个事件监听器，当视频加载时隐藏加载指示器
            videoElement.onload = () => {
                hideLoading();
            };
            
            // 如果视频已经加载完成，则立即隐藏加载指示器
            if (videoElement.complete) {
                hideLoading();
            }
        } else {
            showError('启动摄像头失败');
            startButton.disabled = false;
            hideLoading();
        }
    } catch (error) {
        console.error('启动摄像头时出错:', error);
        showError('无法连接到服务器');
        startButton.disabled = false;
        hideLoading();
    }
}

// 停止摄像头
async function stopCamera() {
    if (!cameraActive) return;
    
    try {
        // 向服务器发送停止摄像头请求
        const response = await fetch('/stop_camera');
        const data = await response.json();
        
        if (data.status === 'success') {
            // 重置视频源为占位图像
            videoElement.src = '/static/img/placeholder.png';
            cameraActive = false;
            startButton.disabled = false;
            stopButton.disabled = true;
        } else {
            showError('停止摄像头失败');
        }
    } catch (error) {
        console.error('停止摄像头时出错:', error);
        showError('无法连接到服务器');
    }
}

// 显示错误信息
function showError(message) {
    alert(message);
}

// 事件监听器
startButton.addEventListener('click', startCamera);
stopButton.addEventListener('click', stopCamera);

// 页面卸载前停止摄像头
window.addEventListener('beforeunload', () => {
    if (cameraActive) {
        fetch('/stop_camera');
    }
}); 